<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农产品溯源</title>
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        /* 容器设置 */
        .container {
            padding: 20px 5%;
            background-color: #e8f5e9; /* 浅绿色背景 */
            font-family: Arial, sans-serif;
            color: #2e7d32; /* 深绿色文本 */
        }

        /* 标题样式 */
        .title {
            font-size: 24px;
            margin-bottom: 20px;
            color: #1b5e20; /* 更深的绿色 */
            text-align: center;
            font-weight: bold;
        }

        /* 卡片样式 */
        .card {
            border-radius: 8px; /* 增加圆角 */
            border: 1px solid #c8e6c9; /* 绿色边框 */
            background-color: #ffffff; /* 白色背景 */
            overflow: hidden;
            color: #2e7d32; /* 深绿色文本 */
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2); /* 绿色阴影 */
            padding: 20px;
        }

        .card:hover {
            box-shadow: 0 6px 18px rgba(46, 125, 50, 0.3); /* 增强悬停效果 */
            transform: translateY(-3px); /* 微调卡片 */
        }

        /* 产品项 */
        .productItem {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
            border-bottom: 1px solid #c8e6c9; /* 绿色分割线 */
            padding-bottom: 10px;
        }

        /* 进程样式 */
        .process {
            margin-top: 20px;
        }

        .processItem {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center; /* 所有步骤都居中对齐 */
            margin: 10px 0;
            width: 100%; /* 父容器占满宽度 */
        }

        /* 进程名称样式 */
        .processName {
            padding: 5px 15px;
            border: 1px solid #66bb6a; /* 边框绿色 */
            background-color: #e8f5e9; /* 浅绿色背景 */
            border-radius: 20px;
            margin-top: 10px;
            font-size: 14px;
            color: #2e7d32; /* 深绿色文本 */
            font-weight: bold;
            text-align: center;
            width: 120px; /* 固定宽度，确保每一步视觉一致 */
            box-sizing: border-box; /* 确保 padding 不影响总宽度 */
        }

        /* 模态框背景 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
            z-index: 999;
        }

        /* 遮罩层 */
        .mask {
            background-color: rgba(0, 128, 0, 0.7); /* 绿色透明遮罩 */
            width: 100%;
            height: 100%;
        }

        /* 模态框主体 */
        .modelBody {
            width: 80%;
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #ffffff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(46, 125, 50, 0.3); /* 绿色阴影 */
            text-align: center;
            color: #2e7d32; /* 深绿色文本 */
        }

        /* 模态框内容项 */
        .processModalItem {
            display: flex;
            align-items: center;
            margin: 20px;
            color: #2e7d32; /* 深绿色文本 */
        }

        .v {
            word-break: break-all;
            margin-left: 20px;
            color: #2e7d32; /* 深绿色文本 */
        }



    </style>
</head>
<body>
<div class="modal" >
    <div class="mask" onclick="closeModal()">
    </div>
    <div class="modelBody">
        <div class="content processModalItem">
            <div class="k">内容：</div>
            <div class="v"></div>
        </div>
        <div class="hashNo processModalItem">
            <div class="k">hash：</div>
            <div class="v"></div>
        </div>
        <div class="blockIndex processModalItem">
            <div class="k">区块号：</div>
            <div class="v"></div>
        </div>
        <div class="createTime processModalItem">
            <div class="k">创建时间：</div>
            <div class="v"></div>
        </div>
        <div class="chainStatus processModalItem">
            <div class="k">上链状态：</div>
            <div class="v"></div>
        </div>
    </div>
</div>
<div class="container ">
    <div class="product card">
        <div class="title">
            农产品信息
        </div>
        <div class="productName productItem">
            <div class="k">农产品名：</div>
            <div class="v"></div>
        </div>
        <div class="productDesc productItem">
            <div class="k">农产品简介：</div>
            <div class="v"></div>
        </div>
        <div class="createTime productItem">
            <div class="k">创建时间：</div>
            <div class="v"></div>
        </div>
    </div>
    <div class="card process">
        <div class="title">
            溯源流程
        </div>
        <div class="processBox">
        </div>
    </div>
</div>
</body>

<script>
    var params = new URLSearchParams(window.location.search);
    var code = params.get('code');

    let processList = []
    function  closeModal() {
        $('.modal').hide()
    }

    function showDetail(i) {
        const item = processList[i]
        $('.modal').show()
        $('.content .v').html(item.content)
        $('.hashNo .v').html(item.hashNo)
        $('.blockIndex .v').html(item.blockIndex)
        $('.createTime .v').html(item.createTime)
        $('.chainStatus .v').html(item.chainStatus === '0'? '未上链': '上链成功' )
    }
    function  init() {
        $.ajax({
            url: '/queryCode?code='+ code, // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            success: function(data) {
                // 在这里处理从服务器返回的数据
                const { list , product } = data.o
                processList = list
                $('.productName .v').html(product.productName)
                $('.productDesc .v').html(product.productDesc)
                $('.createTime .v').html(product.createTime)
                let html = ''
                list.forEach((item,index)=> {
                    const str = `<div class="processItem">
          <div>第${index + 1}步</div>
          <div class="processName" onclick="showDetail(${index})">${item.processName}</div>
        </div>`
                    html += str
                })
                $('.processBox').html(html)
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
            }
        });
    }

    init()
</script>
</html>
